<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>黄之明的简历</title>
  <link href="../font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="../components/businessCard/business-card.css" rel="stylesheet">
  <link rel="stylesheet" href="../swiper/swiper-bundle.min.css">
  <link href="./index.css" rel="stylesheet">
</head>
<body>
  <!-- 这个可以来一个css的艺术字什么的 -->
  <h1>黄之明的简历</h1>

  <!--我的名片-->
  <div class="container">
    <h2>基本信息</h2>
    <div class="business-card">
      <div class="front">
      <h2>黄之明</h2>
      <div class="line"></div>
      <img src="../components/businessCard/我的照片.jpg" alt="person's face photo">
      <div class="contacts">
          <ul>
            <li>
              <i class="fa fa-github "></i>
              <span><a href="https://github.com/HuangZhiming-the-Great" target="_blank">HuangZhiming-the-Great</a></span>
            </li>
            <li class="wechat">
              <i class="fa fa-wechat"></i>
              <span >happy_then_laugh</span>
              <img src="../components/businessCard/微信二维码.jpg" alt="我的微信二维码">
            </li>
            <li>
              <i class="fa fa-phone-square"></i>
              <span>15972286393</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="business-card">
    <div class="back">
      <ul class="base-information">
        <li><span>年龄：</span>26岁</li>
        <li><span>民族：</span>汉族</li>
        <li><span>性别：</span>男</li>
        <li><span>籍贯：</span>湖北省仙桃市</li>
      </ul>
      <p class="introduce">
        乐于分享,
        喜欢收集信息和通过交流来共同成长和学习。
      </p>
    </div>
    </div>
  </div>

  <div class="container">
    <h2>前端技术能力</h2>
      <div class="cards-container">
        <div class="skills">
          <h2>HTML CSS</h2>
          <p>能够手写制作简单的网页,比如说这份简历。</p>
        </div>
      
        <div class="skills">
          <h2>Javascript</h2>
          <p>了解其语言特性——变量提升、作用域；原型、原型链，上下文执行环境，闭包等。</p>
        </div>
      
        <div class="skills">
          <h2>Babel Webpack</h2>
          <p>能简单配置这些编译和打包工具对简单的React组件和项目进行编译和打包。</p>
        </div>
      
        <div class="skills">
          <h2>React Redux</h2>
          <p>能用它们开发简单的web单页应用，能够体会Redux的用意，读懂部分源码。</p>
        </div>
      
        <div class="skills">
          <h2>Git</h2>
          <p>熟练使用git，能够使用命令行工具进行版本控制，能在github上与他人协作。</p>
        </div>
      
        <div class="skills">
          <h2>Markdown</h2>
          <p>非常喜欢，并能流畅使用markdown写文档。</p>
        </div>    
      </div>
    </div>
  
  <!--职业经历轮播图-->
  <div class="container">
    <h2>前端结缘</h2>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <h2>Scratch2与Arduino串口通信的demo</h2>
          <div class="time">2018-08～2018-12
          </div>
          <p>
            在我的上一份工作（STEAM教育课程研发）中，领导想做一个类似乐高WEDO2的教学载体。</p>
            <p>我通过查找资料和资源，使用github上S4A的模块，用
            fxml文件做简单的界面，让用户选择电脑蓝牙串口，然后调用S4A块与Scratch2（少儿图形块编程软件）进行串口通信。进而与接上蓝牙模块的Arduino交互。
          </p>
          <p>
            这让我找到了编程的真实快感，建立了编程能改变现实世界的认识。
          </p>
        </div>
        <div class="swiper-slide">
          <h2>Sratch3到来，认识React。</h2>
          <div class="time">
            2019-04~2020-12
          </div>
            <p>
            由于自己的知识储备和认识不足，以及没有针对性的去全面学习React，所以这个阶段是在痛苦的摸索和懵懂的状态下学到了：
            <ol>
              <li>F12查看、调试网页代码；</li>
              <li>了解一些javascript语法基础，依葫芦画瓢写代码；</li>
              <li>学习、敲击React官方示例。</li>
              <li>了解Node和npm。给自己电脑安装ubuntu，并适应和使用linux操作系统;
              </li>
              <li>
                重新认识了Github的强大功能和意义并注册了自己的github帐号。</li>
            </ol>
            
          </p>
        </div>
        <div class="swiper-slide">
          <h2>前端！前端！前端！</h2>
          <div class="time">
            2021-06~ ...
          </div>
          <p>
            终于明白我需要学习的东西叫“前端”了。于是在网上寻找前端需要学习的内容。
            这个阶段系统的学习了：
            <ol>
              <li>HTML的基本规则和标签。</li>
              <li>CSS的作用和一些基本样式规则。</li>
              <li>Javacript语言特性和基本语法。</li>
              <li>大致了解和学习Jquery以及Bootstrap两个库。</li>
              <li>了解和简单实践了React，体会它在数据流动，驱动显示的特性。</li>
              <li>尝试利用Babel和webpack自己搭建简单、粗糙的脚手架。</li>
            </ol>
          </p>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>  
    </div>
  </div>

  <script src="../swiper/swiper-bundle.min.js"></script>
  <script>        
    var mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal', // 横向切换选项
      loop: true, // 循环模式选项
      autoplay: true, //自动播放
      // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })        
  </script>
  <div class="black-footer"></div>  
  
  <footer>
    <div class="full-education">
      <h2>教育经历：</h2>
      <ul>
        <li>
          <div class="school">海南大学 应用化学系</div>
          <div class="during">2012/09-2016/06</div>
        </li>
        <li>
          <div class="school">湖北省仙桃市高级中学</div>
          <div class="during">2009/09-2012/06</div>
        </li>
      </ul>
    </div>
    <div class="english-level">
      <h2>英语水平：</h2>
      <p>CET: 500</p>
    </div>
    <div class="full-selfintroduction">
      <h2>工作经历、职业规划与对自己的认识：</h2>
      <p>在快3年的STEAM科学课程研发中，我接触到了arduino和C++，scratch和javascript、react，github和开源，邂逅了前端。<strong>前端（编程）技术可以让自己成为更好的STEAM研发，做更多有趣和对社会有价值的事，有更好的回报和职业发展，为什么不去做呢？！</strong></p>
    </div>
  </footer>

  <script>
    document.querySelector(".black-footer").style.height=(document.querySelector("footer").offsetHeight+25)+"px";

    window.addEventListener("resize",()=>{
      document.querySelector(".black-footer").style.height=(document.querySelector("footer").offsetHeight+25)+"px";
    });
  </script>
</body>
</body>
<script text="text/javascript" src="../components/businessCard/business-card.js"></script>
</html>